<!---
   富文本编辑器
-->
<template>
       <div class="editor-box">
            <a-button class="sync-but" type="primary" @click='syncHTML'>效果浏览</a-button>
            <div class="left"> 
                <div :innerHTML='content.html'></div>
            </div>
            <div class="right">
                <div class="editor" ref='editor'></div>
           </div>
     </div>

    <div class="button-box">
       <a-button type="primary" @click='goodsAddClass.onNext(1)'>上一步</a-button>
       <a-button type="primary" danger class="but" @click='goodsAddClass.onSubmit'>提交</a-button>
    </div>
    
</template>

<script>
import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
import WangEditor from 'wangeditor';

import { Button,Input,Form,TreeSelect,Select,Modal} from "ant-design-vue";

import {goodsAddClass} from "@/modules/goods/productAdd";
export default {
    name: 'app',
   components: {
      [Button.name]:Button,
    },
    setup() {
        const editor = ref();
        const content = reactive({
            html: '',
            text: '',
        });
        let instance;
        onMounted(() => {
            instance = new WangEditor(editor.value);
            Object.assign(instance.config, {
                onchange() {
                    console.log('change');
                },
            });
            instance.config.height = 500
            instance.config.uploadImgServer = '/upload-img' // 配置 server 接口地址
            instance.create();
        });

        onBeforeUnmount(() => {
            instance.destroy();
            instance = null;
        });

        const syncHTML = () => {
            content.html = instance.txt.html();
        };
        return {
            syncHTML,
            editor,
            content,
            goodsAddClass
        };
    },
};
</script>

<style lang="scss" scoped>
.editor-box{
    display: flex;
    width:100%;
    position: relative;
    .left{
        flex:4;
        background: #eee;
        margin:20px 20px 0 0;
        max-height: 544px;
        padding:10px;
        overflow-y: auto;
    }
    .right{
        flex:10;
    }
    .sync-but{
        position: absolute;
        top:-10px;
        left:0;
    }
}
.editor{
    margin:20px auto; 
}
.button-box{
 width: 100%;
padding: 20px 0;
position: absolute;
bottom: 0;
.but{
    margin:0 20px 0 20px;
}
}
</style>